<!DOCTYPE html>
<!-- 这里是小傻羊驼做的工具栏 -->
<!-- v0.1 -->
<!-- 还没有什么内容 -->
<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            transform: scale(1.1);
        }
        /* 控制器和内容的整体 */
        #tools {
            width: min-content;
            margin-left: auto;
            /* 防止用户误点复制 */
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        /* 控制器 */
        #toolsa {
            width: 30px;
            height: 30px;
            background-color: khaki;
            padding: 4px;
            margin-left: auto;
        }
        /* 横线 */
        #toolsa div {
            margin: 10% 0 0 10%;
            width: 80%;
            height: 15%;
            background-color: black;
        }

        #toolsb {
            padding: 2px;
            background-color: rgb(241, 236, 183);
            width: 100px;
            display: none;
        }
        #toolsb div[title=tools_list]{
            height:30px;
            width:100%;
            padding: 1px;
        }
        .tools_name{
            margin-left: 35px;
            margin-top: 1.5px;
            font-size: 18px;
        }
        .tools_enlarge_im{
            width:9px;
            height:9px;
            margin:2px 4px 2px 0;
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div style="width: 100%;position: absolute;">
        <div id="tools">
            <div id="toolsa" onclick="toolc()">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div id="toolsb">
                <div title="tools_list" class="tools_enlarge" onclick="tools_enlargedown(true)">
                    <div class="tools_enlarge_im" style=" border-top: 2px solid black;border-left: 2px solid black;float:left;"></div>
                    <div class="tools_enlarge_im" style=" border-top: 2px solid black;border-right: 2px solid black;float:left;"></div>
                    <div class="tools_enlarge_im" style=" border-bottom: 2px solid black;border-left: 2px solid black;clear:both;float: left;"></div>
                    <div class="tools_enlarge_im" style=" border-bottom: 2px solid black;border-right: 2px solid black;float: left;"></div>
                    <div class="tools_name">放大</div>
                </div>
                <div title="tools_list" class="tools_enlarge" onclick="tools_enlargedown(false)">
                    <div class="tools_enlarge_im" style=" border-bottom: 2px solid black;border-right: 2px solid black;float:left;"></div>
                    <div class="tools_enlarge_im" style=" border-bottom: 2px solid black;border-left: 2px solid black;float:left;"></div>
                    <div class="tools_enlarge_im" style=" border-top: 2px solid black;border-right: 2px solid black;clear:both;float: left;"></div>
                    <div class="tools_enlarge_im" style=" border-top: 2px solid black;border-left: 2px solid black;float: left;"></div>
                    <div class="tools_name">缩小</div>
                </div>
            </div>
        </div>
    </div>
    
</body>
<script>
    //尝试内嵌
    var toolc = (function () {
        var tool_is_on = false;
        return function () {
                            var toolsb = document.getElementById("toolsb");
                            if(tool_is_on){
                                    toolsb.style.display = "none";tool_is_on = false;
                                }else{
                                    toolsb.style.display = "block";tool_is_on = true;
                                }

                        }
        })();
    var tools_enlargedown = (function () {
        var zoom = 1;
        return function (ud) {//放大or缩小
                            if(ud){//放大
                                    document.body.style.zoom =(zoom += 0.1);
                                }else{//缩小
                                    document.body.style.zoom =(zoom -= 0.1);
                                }

                        }
        })();
    //setTimeout("location.reload()", 2000)
</script>

</html>